<template>
	<view class="search pdd32">
		<view class="state_type" @click="show = true" v-if="shows">
			<view :class="{ color_blue: show }" class="text">{{ findList(screenData[search.type]).name }}</view>
			<up-icon size="32rpx" :name="config.getImage(show ? 'upper' : 'below')"></up-icon>
		</view>
		<up-search
			shape="round"
			fontSize="24rpx"
			color="#888888"
			:placeholder="search.placeholder || '请输入内容'"
			v-model.trim="screenData[search.text]"
			placeholderClass="placeholderClass"
			confirmType="搜索"
			@search="iconClick"
			:showAction="false"
			bgColor="#efefef"
		></up-search>
	</view>
	<up-popup v-if="shows" :show="show" round="24rpx" @close="show = false">
		<view class="popup" :class="{ isPopup: item.value == popupITem.value }" v-for="(item, index) in popupData" :key="item.name" @click="() => enter(item)">
			<view class="text">{{ item.name }}</view>
		</view>
		<view class="btn">
			<view class="off" @click="show = false">取消</view>
		</view>
	</up-popup>
</template>

<script setup>
import config from '@/config.js';
import { usersStore } from 'store/users.js';
import { string } from 'uview-plus/libs/function/test';
const userStore = usersStore();
const show = ref(false);
const props = defineProps({
	search: {
		type: Object,
		default: () => ({
			searchList: [],
			type: 'type',
			text: 'text',
			placeholder: '请输入内容'
		})
	},
	screenData: {
		type: Object,
		default: () => ({})
	},
	shows: {
		type: Boolean,
		default: true
	}
});
const popupData = computed(() => {
	const list =
		props.search.searchList && props.search.searchList.length
			? [...props.search.searchList]
			: [
					{ name: '全部', value: 0 },
					{ name: '已处理', value: 1 },
					{ name: '未处理', value: 2 },
					{ name: '上报', value: 3 }
			  ];
	return list;
});
const list = [...popupData.value];
const findList = (value) => list.find((item) => item.value == value);
const item = findList(props.screenData[props.search.type]);
const popupITem = ref(item);
const emit = defineEmits(['changeScreenData']);
const cpu = computed(() => props.screenData[props.search.text]);
watch(
	() => cpu.value,
	(newValue) => {
		if (newValue) return;
		emit('changeScreenData', '数据删空了');
	},
	{ deep: true }
);
const enter = (item) => {
	popupITem.value = item;
	props.screenData[props.search.type] = unref(popupITem).value;
	show.value = false;
	emit('changeScreenData', '数据修改了');
};
const iconClick = () => {
	emit('changeScreenData', '数据修改了');
};
</script>

<style lang="scss" scoped>
::v-deep .placeholderClass {
	width: 510rpx;
	height: 64rpx;
	background: #efefef;
}

.search {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	padding-bottom: 16rpx;
	.state_type {
		display: flex;
		align-items: center;
		width: 176rpx;
		height: 64rpx;
		font-family: 'SourceHanSansTC, SourceHanSansTC';
		font-weight: 400;
		font-size: 24rpx;
		color: #222222;
		line-height: 64rpx;
		font-style: normal;
		.color_blue {
			color: #458cff !important;
		}
		.text {
			margin-right: 8rpx;
		}
	}
}
</style>
